<template>
  <div id="selectionlist">
    <el-dialog title="人员信息详情" :visible.sync="personDetailVisible" width="80%" top="20px" :close-on-click-modal="false" :close-on-press-escape="false">
      <personInfo v-bind:personId='personId' :hidemoredetail="true"></personInfo>
    </el-dialog>
    <el-dialog title="补录领导批示" :visible.sync="leaderApproveVisible" width="80%" top="20px" :close-on-click-modal="false" :close-on-press-escape="false">
      <leaderApprove v-bind:personId='personId' :step='1' :szData="selectData.szData" @closeDialog="closeAndRefresh"></leaderApprove>
    </el-dialog>
    <el-dialog title="环节选择" :visible.sync="selectStepVisible" width="80%" top="20px" :close-on-click-modal="false" :close-on-press-escape="false">
      <selectStep v-bind:personId='personId' :changeType='changeType' @closeDialog="selectStepVisible=false"></selectStep>
    </el-dialog>
    <el-dialog title="党组会情况" :visible.sync="meetingDetailVisible" width="95%" :close-on-click-modal="false" :close-on-press-escape="false">
      <meetingDetail :downloadfiles="downloadfiles" :personlist="dongyipersonlist" :dongyishowForm="dongyishowForm" :changeId="changeId"></meetingDetail>
      <div slot="footer" class="dialog-footer" style="overflow:hidden">
        <el-button @click.native="meetingDetailVisible = false" style="float:right">关闭</el-button>
      </div>
    </el-dialog>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/selection' }">干部选任</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/selection/dongyilist' }">动议</el-breadcrumb-item>
    </el-breadcrumb>
    <section class="wboxnoborder">
      <div :style="'height:'+tableHeight+'px'">
        <el-scrollbar style="height: calc(100% + 16px);">
          <!--动议内容-->
          <div>
            <el-radio-group v-model="status" @change="changestatus" style="margin:0 0 0 15px" class="pointRadio">
              <el-radio-button label="正在办理的动议" border>
                <el-badge v-if="countnum1>0" :value="countnum1" class="item">正在办理的动议</el-badge>
              </el-radio-button>
              <el-radio-button label="待报出人选" border>
                <el-badge v-if="countnum2>0" :value="countnum2" class="item">待报出人选</el-badge>
              </el-radio-button>
              <el-radio-button label="已退回人选" border>
                <el-badge v-if="countnum3>0" :value="countnum3" class="item">已退回人选</el-badge>
              </el-radio-button>
            </el-radio-group>
            <el-button type="success" @click="dongyi" icon="el-icon-edit" style="margin:15px 0 0 10px;">动议</el-button>
          </div>
          <div>
            <el-table :data="personlist" highlight-current-row v-loading="listLoading" style="width: calc(100% - 30px);margin:15px" border @selection-change="handleSelectionChange">
              <el-table-column type="selection"  width="40">
              </el-table-column>
              <el-table-column type="index" label="序号" width="40">
              </el-table-column>
              <el-table-column prop="realName" label="姓名" width="70" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="changeTypeText" label="动议类型" width="80">
              </el-table-column>
              <el-table-column label="动议岗位">
                <el-table-column prop="unitName" label="单位" show-overflow-tooltip></el-table-column>
                <el-table-column prop="jobName" label="职务" width="120" show-overflow-tooltip></el-table-column>
                <el-table-column prop="jobLevel" label="职级" width="100" show-overflow-tooltip></el-table-column>
              </el-table-column>
              <el-table-column label="目前信息">
                <el-table-column prop="candidateUnit" label="目前单位" show-overflow-tooltip></el-table-column>
                <el-table-column prop="currentJob" label="目前职务" width="120" show-overflow-tooltip></el-table-column>
                <el-table-column prop="currentLevel" label="目前职级" width="100" show-overflow-tooltip></el-table-column>
                <el-table-column label="干部全方位情况" width="130">
                  <template slot-scope="scope">
                    <el-button size="small" @click="detailAll(scope.row.idcardNo)" type="primary">查看</el-button>
                  </template>
                </el-table-column>
              </el-table-column>
              <el-table-column label="办理人" width="70" prop="stepChangeUsername" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="动议结果" width="70">
                  通过
              </el-table-column>
              <el-table-column label="党组会情况" width="100">
                <template slot-scope="scope">
                  <el-button size="small" @click="detail(scope.row.busChangeProposalId)" type="primary">查看</el-button>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="270">
                <template slot="header">
                  <div style="color:#0000FF !important;font-weight:bolder;font-size:var(--size20) !important;font-family:'黑体'">操作</div>
                </template>
                <template slot-scope="scope">
                  <el-button size="small" @click="selectStep(scope.row)" type="primary">环节选择</el-button>
                  <el-button size="small" @click="addLeaderApprove(scope.row.id)">补录领导批示</el-button>
                  <!-- <div style="text-align:left">
                    <el-checkbox-group v-model="scope.row.selectstep" @change="changeSelectStep($event,scope.$index)">
                      <el-checkbox :label="1" >1、干部档案</el-checkbox>
                      <el-checkbox :label="2" >2、个人事项</el-checkbox>
                      <el-checkbox :label="3" >3、征求意见</el-checkbox>
                      <el-checkbox :label="4" >4、线索举报</el-checkbox><br>
                      <el-checkbox :label="5" @change="select5($event,scope.$index)">不经四必直接民主推荐</el-checkbox>
                    </el-checkbox-group>
                  </div> -->
                </template>
              </el-table-column>
            </el-table>
            <select-group :backflag="false" :selectData="selectData" :selectPerson="selectPerson" @getList="getList"></select-group>
          </div>
          <!--动议内容结束-->
        </el-scrollbar>
      </div>
    </section>
  </div>
</template>

<script>
import Qs from 'qs'
import personInfo from '@/person/Detail.vue'
import notice from './common/Notice'
import selectGroup from './common/SelectGroup'
import selectStep from './common/SelectStep'
import leaderApprove from './common/leaderApprove'
import meetingDetail from './common/meetingDetail'
export default {
  components: {
    notice,
    selectGroup,
    meetingDetail,
    personInfo,
    selectStep,
    leaderApprove
  },
  data () {
    return {
      changeId: '',
      leaderApproveVisible: false,
      changeType: '',
      selectStepVisible: false,
      countnum1: 0,
      countnum2: 0,
      countnum3: 0,
      meetingDetailVisible: false,
      dongyishowForm: {
        meetdate: '',
        meetnum: '',
        buleader: '',
        sileader: ''
      },
      downloadfiles: [],
      dongyipersonlist: [],
      status: '待报出人选',
      personlist: [],
      selectPerson: [],
      listLoading: false,
      changeSizeFlag: false,
      tableHeight: 100,
      workflowForm: {
        recipient: '',
        msg: ''
      },
      workflowFormRules: {
        meetdate: [{ required: true, message: '请输入党组会时间', trigger: 'blur' }],
        meetnum: [{ required: true, message: '请输入第几次党组会', trigger: 'blur' }],
        buleader: [{ required: true, message: '请输入部领导批示', trigger: 'blur' }],
        sileader: [{ required: true, message: '请输入司领导批示', trigger: 'blur' }]
      },
      dongyiid: '',
      selectData: {
        hjData: [
        ],
        szData: [
        ],
        yyData: []
      },
      personDetailVisible: false,
      personId: ''
    }
  },
  methods: {
    closeAndRefresh () {
      this.leaderApproveVisible = false
      this.getList()
    },
    addLeaderApprove (id) {
      this.leaderApproveVisible = true
      this.personId = id
    },
    selectStep (data) {
      this.selectStepVisible = true
      this.personId = data.id
      this.changeType = data.changeType
    },
    changeSelectStep (val, index) {
      if (val.indexOf(1) > -1 || val.indexOf(2) > -1 || val.indexOf(3) > -1 || val.indexOf(4) > -1) {
        if (this.personlist[index].selectstep.findIndex(item => item === 5) > -1) {
          this.personlist[index].selectstep.splice(this.personlist[index].selectstep.findIndex(item => item === 5), 1)
        }
      } else {
        this.personlist[index].selectstep = [5]
      }
    },
    select5 (val, index) {
      if (val) {
        this.personlist[index].selectstep = [5]
      }
    },
    persondetail (id) {
      this.personDetailVisible = true
      this.personId = id
    },
    detailAll (idcardNo) {
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/jiben/getIdByIdCardNo?idcard=` + idcardNo)
        .then(response => {
          if (response.data.success) {
            if (response.data.result) {
              this.persondetail(response.data.result)
            } else {
              this.$message({
                message: '无此人选的干部全方位情况',
                type: 'error'
              })
            }
          } else {
            this.$message({
              message: '查询失败:无此人选的干部全方位情况',
              type: 'error'
            })
          }
        })
        .catch(function () {
          this.$message({
            message: '查询失败:无此人选的干部全方位情况',
            type: 'error'
          })
        })
    },
    loadSelectData () {
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/auth/getUsersByRole?roletype=1`)
        .then(response => {
          if (response.data.success) {
            this.selectData.hjData = []
            for (let i = 0; i < response.data.result.length; i++) {
              if (response.data.result[i].unitName === '干部监督处') {
                this.selectData.hjData.push(response.data.result[i])
              }
            }
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/auth/getUsersByRole?roletype=2`)
        .then(response => {
          if (response.data.success) {
            this.selectData.szData = []
            for (let i = 0; i < response.data.result.length; i++) {
              if (response.data.result[i].roleName === 'ROLE_sizhang' || response.data.result[i].manageDep.indexOf(localStorage.getItem('unitName')) > -1 || response.data.result[i].manageDep.indexOf('干部监督处') > -1) {
                this.selectData.szData.push(response.data.result[i])
              }
            }
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/home/getCommonlyOpinions?step=1`)
        .then(response => {
          if (response.data.success) {
            this.selectData.yyData = response.data.result
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    },
    dongyi () {
      this.$router.push({path: '/selection/dongyi/0'})
    },
    detail (id) {
      if (id !== '0') {
        this.$http
          .post(this.$http.defaults.selectionAPI + `api/change/getChangeProposalPersons/`, Qs.stringify({id: parseInt(id)}))
          .then(response => {
            if (response.data.success) {
              this.dongyipersonlist = response.data.result.persons
              if (response.data.result.meeting) {
                this.dongyishowForm.sileader = response.data.result.meeting.leader2Opionion
                this.dongyishowForm.buleader = response.data.result.meeting.leaderOpinion
                this.dongyishowForm.meetnum = response.data.result.meeting.meetingNumber
                this.dongyishowForm.meetdate = response.data.result.meeting.meetingTime
              }
              this.downloadfiles = response.data.result.files
              this.meetingDetailVisible = true
              this.changeId = id
            } else {
              this.$message({
                message: '获取失败:' + response.data.message,
                type: 'error'
              })
            }
          })
          .catch(error => {
            console.log(error)
            this.$message({
              message: '获取失败:' + error,
              type: 'error'
            })
          })
      }
    },
    handleSelectionChange (val) {
      this.selectPerson = val
    },
    changestatus () {
      if (this.status === '正在办理的动议') {
        this.$router.push({path: '/selection/dongyilist/'})
      }
      if (this.status === '已退回人选') {
        this.$router.push({path: '/selection/dongyifinish/'})
      }
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - 165
      })
    },
    getList () {
      this.listLoading = true
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/afterchange/getPersons`)
        .then(response => {
          this.listLoading = false
          if (response.data.success) {
            let personlist = response.data.result
            for (let i = 0; i < personlist.length; i++) {
              personlist[i].selectstep = [1, 2, 3, 4]
            }
            this.personlist = personlist
            this.changeSizeFlag = false
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
          this.listLoading = false
        })
        .catch(function (error) {
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
          this.listLoading = false
        })
      this.getNums()
    },
    savedongyi () {
      this.$refs['dongyiForm'].validate((valid) => {
        if (valid) {
          for (let i = 0; i < this.personlist.length; i++) {
            if (!this.personlist[i].passed) {
              this.$message({
                message: '请将本次动议全部人选动议结果填写完整',
                type: 'error'
              })
              return false
            }
          }
          this.$confirm('本次党组会动议是否完成?', '提示', {
            confirmButtonText: '是，进入下一环节',
            cancelButtonText: '否，暂存',
            type: 'warning'
          }).then(() => {
            this.submitdongyi(true)
          }).catch(() => {
            this.submitdongyi(false)
          })
        }
      })
    },
    submitdongyi (flag) {
      if (flag) {
        console.log('保存，进入下一环节')
      } else {
        console.log('暂存')
      }
      let para = {
        dongyiid: this.dongyiid,
        meetdate: this.dongyiForm.meetdate,
        meetnum: this.dongyiForm.meetnum,
        buleader: this.dongyiForm.buleader,
        sileader: this.dongyiForm.sileader,
        saveflag: flag
      }
      this.$http
        .post(this.$http.defaults.selectionAPI + `api/selection/dongyi/save/`, para)
        .then(response => {
          if (response.data.result) {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            if (flag) {
              this.step = 3
            }
          } else {
            this.$message({
              message: '保存失败:' + response.data.msg,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '保存失败:' + error,
            type: 'error'
          })
        })
    },
    getNums () {
      this.$http
        .get(this.$http.defaults.selectionAPI + `api/selection/statnum/change/getStatNum`)
        .then(response => {
          if (response.data.success) {
            this.countnum1 = response.data.result.countnum1
            this.countnum2 = response.data.result.countnum2
            this.countnum3 = response.data.result.countnum3
          } else {
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  },
  mounted () {
    this.loadSelectData()
    this.getList()
    this.tableresize(this)
    let _this = this
    window.onresize = function windowResize () {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      _this.tableresize(_this)
    }
  }
}
</script>
<style>
  #selectionlist .wboxnoborder .el-table{
    border: #95B8E7 solid 1px;
  }
  #selectionlist .wboxnoborder .el-table th{
    font-weight: normal;
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
    text-align: center;
    border-right: #95B8E7 solid 1px;
    border-bottom: #95B8E7 solid 1px;
    min-height: 30px;
    line-height:30px;
  }
  #selectionlist .wboxnoborder .el-table td, .el-table th{
    padding:0;
    font-size:var(--size14) !important;
    line-height: 20px;
    font-family: '宋体';
    text-align: center;
  }
  #selectionlist .el-table__row{
    height: 50px;
  }
</style>
<style scoped>
  .workflowmsg ul{
    background:#F5F7FA;
    margin:0 20px 20px;
    padding:10px 0;
  }
  .workflowmsg li{
    padding:0;
    list-style: none;
    margin-left:20px;
    line-height: 200%;
    font-size:var(--size) !important;
  }
  h1{
    font-size:var(--size16) !important;
    font-weight: bolder;
    height: 30px;
    border-bottom: 1px solid #95B8E7;
    font-family: '宋体';
    line-height: 30px;
    color: #000;
    padding-left:10px;
    background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
    margin:0;
  }
  h3{
    font-size:var(--size16) !important;
    font-weight: bolder;
    padding-left: 20px;
  }
  .el-pagination{
    float: left;
    padding:7px 10px;
  }
  .wboxs{
    padding:5px 15px;
    width: calc(100% - 30px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
  #selectionlist .wboxnoborder{
    padding:0;
    width: calc(100% - 0px);
    background: #fff;
    margin:0 10px;
    overflow: hidden;
  }
</style>
